<template>
  <div class="department">
    <PageSearch
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    />
    <div class="content">
      <PageContent
        ref="pageContentRef"
        :contentTableConfig="contentTableConfig"
        pageName="department"
        @newBtnClick="handleNewData"
        @editBtnClick="handleEditData"
        @look-btn-click="handleLookData"
      />
      <PageModal
        :modalConfig="modalConfig"
        ref="pageModalRef"
        :defaultInfo="defaultInfo"
        pageName="users"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/index'
import PageContent from '@/components/page-content/index'
import PageModal from '@/components/page-modal'
import { searchFormConfig } from './config/pageSearch.config'
import { contentTableConfig } from './config/pageContent.config'
import { usePageSearch } from '@/hooks/usePageSearch'
import { useModal } from '@/hooks/useModal'
import { modalConfig } from './config/pageModal.config'

const [handleResetClick, handleQueryClick, pageContentRef] = usePageSearch()
// 调用hooks公共的方法
const [
  handleNewData,
  handleEditData,
  handleLookData,
  defaultInfo,
  pageModalRef
] = useModal(modalConfig)
</script>

<style scoped lang="less">
.content {
  margin-top: 20px;
  padding: 20px;
  background-color: #ffffff;
}
</style>
